<template>
  <div v-loading="loading">
    <queryHead v-if="head" :explain="explain" :result="msg" :time="time" :price="price" @query="query"/>
    <div v-if="lock" style="background-color: #fafafa;padding: 5px;border-radius: 5px">
      <div class="row-label-block">
        <i class="el-icon-s-data" style="display: block; margin-bottom: 10px">
          <label>个人案件报告</label>
        </i>
        <table class="sfhy" style="margin-top: 10px">
          <thead>
          <tr>
            <th colspan="2">民事案件</th>
            <th colspan="3">刑事案件</th>
            <th colspan="2">行政案件</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td colspan="2">{{ getAJnum(sifa.civil) }}</td>
            <td colspan="3">{{ getAJnum(sifa.criminal) }}</td>
            <td colspan="2">{{ getAJnum(sifa.administrative) }}</td>
          </tr>
          </tbody>
          <thead>
          <tr>
            <th colspan="2">执行案件</th>
            <th colspan="3">强制清算与破产案件</th>
            <th colspan="2">非诉保全审查</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td colspan="2">{{ getAJnum(sifa.implement) }}</td>
            <td colspan="3">{{ getAJnum(sifa.bankrupt) }}</td>
            <td colspan="2">{{ getAJnum(sifa.preservation) }}</td>
          </tr>
          <template v-if="sifa.count">
            <tr>
              <td colspan="7">案件统计</td>
            </tr>
            <tr class="ajtj">
              <td>案件总数量</td>
              <td>已结案件数量</td>
              <td>未结案件数量</td>
              <td>原告总数</td>
              <td>原告已结案总数</td>
              <td>原告未结案总数</td>
              <td>被告总数</td>
            </tr>
            <tr class="ajtj">
              <td>{{ sifa.count.count_total }}</td>
              <td>{{ sifa.count.count_jie_total }}</td>
              <td>{{ sifa.count.count_wei_tota }}</td>
              <td>{{ sifa.count.count_yuangao }}</td>
              <td>{{ sifa.count.count_jie_yuangao }}</td>
              <td>{{ sifa.count.count_wei_yuangao }}</td>
              <td>{{ sifa.count.count_beigao }}</td>
            </tr>
            <tr class="ajtj">
              <td>被告已结案总数</td>
              <td>被告未结案总数</td>
              <td>第三人总数</td>
              <td>第三人已结案总数</td>
              <td>第三人未结案总数</td>
              <td>涉案总金额（单位：万元）</td>
              <td>已结案金额（单位：万元）</td>
            </tr>
            <tr class="ajtj">
              <td>{{ sifa.count.count_jie_beigao }}</td>
              <td>{{ sifa.count.count_wei_beigao }}</td>
              <td>{{ sifa.count.count_other }}</td>
              <td>{{ sifa.count.count_jie_other }}</td>
              <td>{{ sifa.count.count_wei_other }}</td>
              <td>{{ GRAJFF(sifa.count.money_total) }}</td>
              <td>{{ GRAJFF(sifa.count.money_jie_total) }}</td>
            </tr>
            <tr class="ajtj">
              <td>未结案金额（单位：万元）</td>
              <td>未结案金额占比</td>
              <td>原告金额（单位：万元）</td>
              <td>原告已结案金额（单位：万元）</td>
              <td>原告未结案金额（单位：万元）</td>
              <td>被告金额（单位：万元）</td>
              <td>被告已结案金额（单位：万元）</td>
            </tr>
            <tr class="ajtj">
              <td>{{ GRAJFF(sifa.count.money_wei_total) }}</td>
              <td>{{ sifa.count.money_wei_percent }}</td>
              <td>{{ GRAJFF(sifa.count.money_yuangao) }}</td>
              <td>{{ GRAJFF(sifa.count.money_jie_yuangao) }}</td>
              <td>{{ GRAJFF(sifa.count.money_wei_yuangao) }}</td>
              <td>{{ GRAJFF(sifa.count.money_beigao) }}</td>
              <td>{{ GRAJFF(sifa.count.money_jie_beigao) }}</td>
            </tr>
          </template>
          </tbody>
        </table>

        <i class="el-icon-s-data" style="display: block; margin-top: 20px">
          <label>各案件关系树</label>
        </i>
        <div id="ajcls" style="width: 1000px;height:450px;margin: 20px;padding: 20px"></div>

        <i class="el-icon-s-data" style="display: block; margin-top: 20px">
          <label>涉案公告</label>
        </i>
        <table class="sfhy" style="margin-top: 10px">
          <template v-for="(objValue,key,index) of sifa" v-if="contain(key,objValue)">
            <template v-for="(cases,i) in objValue.cases">
              <thead>
              <tr>
                <th>案号</th>
                <th>案件类型</th>
                <th>法院</th>
                <th>诉讼身份</th>
                <th>立案时间</th>
                <th>结案时间</th>
                <th>案件状态</th>
                <th>案由</th>
                <th>结案方式</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td rowspan="2">{{ cases.c_ah }}</td>
                <td>{{ cases.n_ajlx }}</td>
                <td>{{ cases.n_jbfy }}</td>
                <td>{{ cases.n_ssdw }}</td>
                <td>{{ cases.d_larq }}</td>
                <td>{{ cases.d_jarq }}</td>
                <td>{{ cases.n_ajjzjd }}</td>
                <td>{{ cases.n_laay }}</td>
                <td>{{ cases.n_jafs }}</td>
              </tr>
              <tr>
                <td colspan="8">
                  判决结果：{{ 'c_gkws_pjjg' in cases ? cases.c_gkws_pjjg : '无' }}
                </td>
              </tr>
              <tr>
                <td colspan="9"/>
              </tr>
              </tbody>
            </template>
          </template>
        </table>

        <i class="el-icon-s-data" style="display: block; margin-top: 20px">
          <label>执行公告{{ 'cases' in sifa.implement ? '' : '（暂无）' }}</label>
        </i>
        <table v-if="'cases' in sifa.implement" class="sfhy"
               style="margin-top: 10px">
          <template v-for="(item, index) in sifa.implement.cases">
            <thead>
            <tr>
              <th>案号</th>
              <th>案件类型</th>
              <th>法院</th>
              <th>诉讼身份</th>
              <th>立案时间</th>
              <th>结案时间</th>
              <th>结案方式</th>
              <th>执行标的金额</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td rowspan="2">{{ item.c_ah }}</td>
              <td>{{ item.n_ajlx }}</td>
              <td>{{ item.n_jbfy }}</td>
              <td>{{ item.n_ssdw }}</td>
              <td>{{ item.d_larq }}</td>
              <td>{{ item.d_jarq }}</td>
              <td>{{ item.n_jafs }}</td>
              <td>{{ item.n_sqzxbdje }}</td>
            </tr>
            <tr>

              <td colspan="8">判决结果：{{ 'c_gkws_pjjg' in item ? item.c_gkws_pjjg : '无' }}</td>
            </tr>
            </tbody>
          </template>

        </table>

        <i class="el-icon-s-data" style="display: block; margin-top: 20px">
          <label>强制清算与破产案件{{ 'cases' in sifa.bankrupt ? '' : '（暂无）' }}</label>
        </i>
        <table v-if="'cases' in sifa.bankrupt" class="sfhy"
               style="margin-top: 10px">
          <template v-for="(item, index) in sifa.bankrupt.cases">
            <thead>
            <tr>
              <th>案号</th>
              <th>案件类型</th>
              <th>法院</th>
              <th>诉讼身份</th>
              <th>当事人</th>
              <th>立案时间</th>
              <th>案件进展阶段</th>
              <th>所属地域</th>
              <th>结案时间</th>
              <th>结案方式</th>
              <th>执行标的</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td rowspan="2">{{ item.c_ah }}</td>
              <td>{{ item.n_ajlx }}</td>
              <td>{{ item.n_jbfy }}</td>
              <td>{{ item.n_ssdw }}</td>
              <td>{{ item.c_dsrxx }}</td>
              <td>{{ item.d_larq }}</td>
              <td>{{ item.n_ajjzjd }}</td>
              <td>{{ item.c_ssdy }}</td>
              <td>{{ item.d_jarq }}</td>
              <td>{{ item.n_jafs }}</td>
              <td>{{ item.n_sqzxbdje }}</td>
            </tr>
            <tr>
              <td colspan="8">判决结果：{{ 'c_gkws_pjjg' in item ? item.c_gkws_pjjg : '无' }}</td>
            </tr>
            </tbody>
          </template>
          <template v-if="'cases' in sifa.bankrupt">
            <tr>
              <td>未命中</td>
            </tr>
          </template>
        </table>

        <i class="el-icon-s-data" style="display: block; margin-top: 20px">
          <label>非诉保全审查{{ 'cases' in sifa.preservation ? '' : '（暂无）' }}</label>
        </i>
        <table v-if="'cases' in sifa.preservation" class="sfhy"
               style="margin-top: 10px">
          <template v-for="(item, index ) in sifa.preservation.cases">
            <thead>
            <tr>
              <th>案号</th>
              <th>案件类型</th>
              <th>法院</th>
              <th>诉讼身份</th>
              <th>立案时间</th>
              <th>结案时间</th>
              <th>结案方式</th>
              <th>执行标的</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td rowspan="2">{{ item.c_ah }}</td>
              <td>{{ item.n_ajlx }}</td>
              <td>{{ item.n_jbfy }}</td>
              <td>{{ item.n_ssdw }}</td>
              <td>{{ item.d_larq }}</td>
              <td>{{ item.d_jarq }}</td>
              <td>{{ item.n_jafs }}</td>
              <td>{{ item.n_sqzxbdje }}</td>
            </tr>
            <tr>
              <td colspan="8">判决结果：{{ 'c_gkws_pjjg' in item ? item.c_gkws_pjjg : '无' }}</td>
            </tr>
            </tbody>
          </template>
        </table>

      </div>
    </div>
  </div>
</template>

<script>
  import {GRAJFF} from "@/utils/grajParam.js";
  import queryHead from "@/views/components/queryHead.vue";
  import * as echarts from 'echarts';
  import {queryRecord, queryData} from "@/api/system/query";

  export default {
    components: {queryHead},
    name: "graj",
    props: {
      queryData: {
        required: true,
        type: Object
      },
      price: {
        default: null,
        type: Number
      },
      priceType: {
        default: null,
        type: Boolean
      },
      explain: {
        default: null,
        type: String
      },
      head: {
        default: true,
        type: Boolean
      }
    },
    data() {
      return {
        loading: false,
        lock: false,

        msg: undefined,
        time: undefined,

        sifa: {}
      }
    },
    created() {
      this.loading = true;
      queryRecord(this.queryData).then(response => {
        this.disResponse(response)
      })
    },
    methods: {
      GRAJFF,
      query() {
        this.loading = true;
        queryData(this.queryData).then(response => {
          this.disResponse(response)
        })
      },
      disResponse(response) {
        if (response.info) {
          this.time = response.time
          const data = JSON.parse(response.info)
          console.log(data)
          this.msg = data.retmsg
          if (data.retcode == '000000') {
            const retdata = data.retdata
            if (retdata.resultCode == 1) {
              this.sifa = retdata.detail[0]
              // 处理数据，启动渲染
              let data_ = this.sifa.cases_tree

              setTimeout(() => {
                echarts.init(document.getElementById('ajcls')).setOption({
                  tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                  },
                  series: [
                    {
                      type: 'tree',
                      initialTreeDepth: -1,
                      data: [data_],
                      top: '1%',
                      left: '1%',
                      bottom: '1%',
                      right: '1%',
                      symbolSize: 7,
                      label: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 15
                      },
                      leaves: {
                        label: {
                          position: 'right',
                          verticalAlign: 'middle',
                          align: 'left'
                        }
                      },
                      emphasis: {
                        focus: 'descendant'
                      },
                      animationDuration: 550,
                      animationDurationUpdate: 750
                    }
                  ]

                });
              }, 800)

              this.lock = true
            } else {
              this.$modal.msg('个人案件信息：' + retdata.messge)
            }
          } else {
            this.$modal.msgWarning('个人案件信息：' + data.retmsg)
          }
        }
        this.loading = false
      },
      contain(item, obj) {
        let ss = false
        if (['civil', 'criminal', 'administrative', 'implement', 'bankrupt', 'preservation'].indexOf(item) != -1 && 'cases' in obj) {
          ss = true
          this.isXr = true
        }
        return ss
      },
      getAJnum(data) {
        if ('cases' in data) {
          return data.cases.length + '条'
        }
        return '未命中（0条）'
      }
    }
  };
</script>

<style scoped>
  .sfhy {
    margin: 0 auto;
    border: 1px solid #ccc;
    width: 100%;
    border-collapse: collapse;
  }

  .sfhy th, td {
    text-align: center;
    padding: 12px 0px;
    color: #909399;
    font-size: 12px;
  }

  th {
    background-color: #f5f5f5;
  }

  td {
    border: 1px solid #ccc;
  }
</style>
